<template>
	<div>
		<!-- 导航栏 -->
		<div class="articleview-top useview-top alltop">
			<span>
				<router-link to="/"><</router-link>
			</span>
			<p>文章详情</p>
		</div>
		<!-- /导航栏 -->

		<div class="container">
			<div class="article-content">
				<h1 class="title">{{article.title||title}}</h1>

				<!-- 骨架屏 -->
				<van-skeleton title avatar :row="3" :loading="!article.time">
					<div>
						<van-cell center class="user-info">
							<div slot="title" class="name">{{article.author}}</div>
							<van-image slot="icon" class="avatar" round fit="cover" :src="article.avatar" />
							<div slot="label" class="pubdate">{{article.time}}</div>
							<!-- <van-button class="follow-btn" type="default" icon="plus" round size="small">已关注</van-button> -->
						</van-cell>
						<div class="markdown-body" v-html="article.content"></div>
					</div>
				</van-skeleton>

				<van-divider :style="{borderColor: '#999',height:'5px' }"></van-divider>
				<div class="section-title">热门评论</div>
				
				
				<!-- 文章评论列表 -->
				<div>
					<van-list v-model="commentLoading" :finished="commentFinished" @load="getCommentList" :immediate-check="false">
						<template #finished>
							<!-- 如果没有人评论(没有数据) 显示 暂无评论 快来抢沙发吧 -->
							<!-- 如果有人评论(有数据 数据加载完了) 显示 没有更多了 -->
							<div>
								<p v-if="commentList.length===0" style="position: relative;">
									<svg xml:space="preserve" viewBox="0 0 100 100" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="圖層_1" version="1.1" style="height: 100%; width: 80%; background: rgb(255, 255, 255);" width="200px" height="200px"><g class="ldl-scale" style="transform-origin: 50% 50%; transform: rotate(0deg) scale(0.8, 0.8);"><g class="ldl-ani"><g class="ldl-layer"><g class="ldl-ani"><g><g class="ldl-layer"><g class="ldl-ani" style="transform: scale(0.91); transform-origin: 50px 50px; animation: 1.11111s linear -0.648148s infinite normal forwards running breath-78ccabf8-c6b6-4e59-828f-653753fb2108;"><line y2="88.6" x2="28.1" y1="83" x1="28.1" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#000000" fill="none" style=""></line></g></g><g class="ldl-layer"><g class="ldl-ani" style="transform: scale(0.91); transform-origin: 50px 50px; animation: 1.11111s linear -0.740741s infinite normal forwards running breath-78ccabf8-c6b6-4e59-828f-653753fb2108;"><line y2="88.6" x2="71.9" y1="83" x1="71.9" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#000000" fill="none" style=""></line></g></g></g></g></g><g class="ldl-layer"><g class="ldl-ani" style="transform: scale(0.91); transform-origin: 50px 50px; animation: 1.11111s linear -0.833333s infinite normal forwards running breath-78ccabf8-c6b6-4e59-828f-653753fb2108;"><path d="M80.1,26.4c-5,0-9.8-2-13.3-5.6 c-4.3-4.4-10.2-7.1-16.8-7.1s-12.5,2.7-16.8,7.1c-3.5,3.6-8.3,5.6-13.3,5.6h0c-3.2,0-5.6,2.8-5.1,5.9L20.5,72 c0.8,5.7,4.9,10.4,10.5,11.7c12.5,3,25.2,3,38,0c5.6-1.3,9.7-6,10.6-11.7l5.7-39.7C85.7,29.2,83.2,26.4,80.1,26.4L80.1,26.4z" stroke-miterlimit="10" stroke-width="3" stroke="#000000" fill="#F4E6C8" style="fill: rgb(244, 230, 200);"></path></g></g><g class="ldl-layer"><g class="ldl-ani"><g><g class="ldl-layer"><g class="ldl-ani" style="transform: scale(0.91); transform-origin: 50px 50px; animation: 1.11111s linear -0.925926s infinite normal forwards running breath-78ccabf8-c6b6-4e59-828f-653753fb2108;"><path d="M72.3,60.5c0,4.3-7.4,6.7-22.3,6.7 s-22.3-2.4-22.3-6.7s7.4-6.7,22.3-6.7S72.3,56.2,72.3,60.5z" stroke-miterlimit="10" stroke-width="3" stroke="#000000" fill="#F2F2F3" style="fill: rgb(242, 242, 243);"></path></g></g><g class="ldl-layer"><g class="ldl-ani" style="transform: scale(0.91); transform-origin: 50px 50px; animation: 1.11111s linear -1.01852s infinite normal forwards running breath-78ccabf8-c6b6-4e59-828f-653753fb2108;"><path d="M74.6,37.5l-2.7,17.9c-0.1,0.9-1,1.3-1.3,1.5" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#000000" fill="#F2F2F3" style="fill: rgb(242, 242, 243);"></path></g></g><g class="ldl-layer"><g class="ldl-ani" style="transform: scale(0.91); transform-origin: 50px 50px; animation: 1.11111s linear -1.11111s infinite normal forwards running breath-78ccabf8-c6b6-4e59-828f-653753fb2108;"><path d="M25.4,37.5l2.7,17.9c0.1,0.9,1,1.3,1.3,1.5" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#000000" fill="#F2F2F3" style="fill: rgb(242, 242, 243);"></path></g></g></g></g></g><metadata xmlns:d="https://loading.io/stock/">
									<d:name>couch</d:name>
									<d:tags>chair,sofa,armchair,wing chair,living room,seat</d:tags>
									<d:license>by</d:license>
									<d:slug>qofu3g</d:slug>
									</metadata></g></g></svg>
									<em style="position: absolute;bottom: 25px;left: 120px;font-style: normal;">暂无评论，快来抢沙发吧</em>
								</p>
								<p v-else>没有更多数据了</p>
							</div>
						</template>
						
						<van-cell class="comment-item" v-for="(item,index) in commentList" :key="item._id">
							<van-image slot="icon" class="avatar" round fit="cover" :src="item.info.avatar" />
							<div slot="title">
								<div class="title-w">
									<div class="name">{{item.info.nickname}}</div>
									<div class="like-w">
										<van-icon class="like-icon" :class="{liked:item.is_like}" name="good-job" @click="togglecommentLike(item._id,item.is_like,index)"/>
										<span class="like-count">{{item.like_count==0?'':item.like_count}}</span>
									</div>
								</div>
								<div class="content">{{item.content}}</div>
								<div class="info">
									<span class="pubdate">{{item.create_time}}</span>
									<van-button class="reply-btn" round size="mini">{{item.reply_num==0?'':item.reply_num}}
										回复</van-button>
								</div>
							</div>
						</van-cell>
					</van-list>
				</div>
				<!-- /文章评论列表 -->
			</div>
		</div>



		<!-- /发布评论 -->
		<div class="article-bottom">
			<van-button class="comment-btn" type="default" round size="small" @click="PopuShow">写评论
			</van-button>
			<!-- 评论 -->
			<van-icon name="comment-o" color="#777" v-if="article.comment==0" />
			<van-icon name="comment-o" color="#777" v-else :badge="article.comment" />
			<!-- commentList.length这是bug -->
			<!-- 收藏 -->
			<van-icon name="star" :color="article.is_fav?'#f00':'#777'" @click="toggleFav" />
			<!-- 点赞 -->
			<van-icon name="good-job" :color="article.is_like?'#f00':'#777'" @click="toggleLike" />
			<van-icon name="share" color="#777777"></van-icon>
		</div>
		<!-- 评论回复 -->

		<van-popup v-model="commentPopuShow" position="bottom">
			<div class="post-comment">
				<van-field v-model="content" rows="4" autosize type="textarea" maxlength="1000" placeholder="留下您的精彩评论"
					show-word-limit />
				<div style="width: 100%;">
					<van-button size="large" type="primary" @click="submit">确定</van-button>
				</div>
			</div>
		</van-popup>
		<!-- /评论回复 -->
	</div>
</template>

<script>
	import '../../common/github-markdown.css'
	import {
		addComment
	} from '../../api/api.js'
	import {
		mapState
	} from 'vuex'
	import {
		Skeleton,
		Divider,
		List,
		Empty
	} from 'vant';
	import articleMethods from './articleMethods.js'
	import commentMixin from './commentMixin.js'


	export default {
		name: 'articleView',
		data() {
			return {
				commentPopuShow: false,
				content: '',
				title: "",
				article_id: '',
				article: {},
				comment_type: 0
			}
		},
		mixins: [commentMixin],
		components: {
			[Skeleton.name]: Skeleton,
			[Divider.name]: Divider,
			[List.name]: List,
			[Empty.name]: Empty,
		},
		computed: {
			...mapState(['uid','userInfo'])
		},
		created() {
			let {
				title,
				article_id
			} = this.$route.query;
			this.article_id = article_id;
			this.title = title;

			this.getArticleDetail()
		},
		methods: {
			...articleMethods,
			
			// 弹出评论 弹窗
			PopuShow(){
				if(this.checkLogin()){
					this.commentPopuShow=true
				}
			},
			
			// 发布评论
			submit() {
				let {
					content,
					uid: user_id,
					article_id,
					comment_type
				} = this;
				
				// 对content进行校验
				content=content.trim()
				if(typeof content!='string' || content.length===0){
					this.$toast('格式错误')
					return
				}
				
				// 上面进行 判断以后 没问题 就可以去请求接口了
				addComment({
					content,
					user_id,
					article_id,
					comment_type
				}).then(res=>{
					console.log(res);
					
					this.$toast(res.msg);
					
					// 发布成功以后有 两个方案 
					if(res.code==0){
						this.commentPopuShow=false;
						this.content='';
						this.article.comment++;
						
						// 方案一
						// 评论出现  每发一个重新请求一次接口刷新一次  不太好
						// this.skip=0;
						// this.commentFinished=false;
						// this.commentList=[];
						// this.getCommentList()
						
						// 方案二
						// 拿到数据以后 把数据模拟出来  然后放进去  放到newCommentData
						// 这样写不会 每发一次 都请求接口 
						let {avatar,nickname,username}=this.userInfo
						let newCommentData={
							article_id,
							comment_type,
							content,
							create_time:new Date().getTime(),
							like_count:0,
							reply_comment_id: "",
							reply_num:0,
							user_id,
							info:{
								avatar,
								nickname,
								username,
								_id:user_id
							},
							_id: res.data.id//你刚发布的 这条数据的 id
						};
						this.commentList.unshift(newCommentData)
					}
					
					
				})
				
			}
		}
	}
</script>

<style scoped lang="less">
	.article-content {
		overflow-y: auto;
		padding-bottom: 80px;
		min-height: calc(100vh-80px);
		// padding-bottom: 100px;
		.title {
			font-size: 20px;
			color: #3a3a3a;
			padding: 24px 20px 18px;
			background-color: #fff;
			margin: 0;
		}
	}

	.section-title {
		padding: 10px;
		font-size: 24px;
		color: #222222;
	}


	.user-info {
		.avatar {
			width: 35px;
			height: 35px;
			margin-right: 8px;
		}

		.name {
			font-size: 12px;
			color: #333333;
		}

		.pubdate {
			font-size: 11px;
			color: #b4b4b4;
		}

		.follow-btn {
			width: 85px;
			height: 29px;
		}
	}

	ul {
		list-style: unset;
	}

	.markdown-body {
		padding: 14px;
		background-color: #fff;
	}

	.article-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		height: 44px;
		border-top: 1px solid #d8d8d8;
		background-color: #fff;

		.comment-btn {
			width: 141px;
			height: 23px;
			border: 1px solid #eeeeee;
			font-size: 15px;
			line-height: 23px;
			color: #a7a7a7;
		}

		.van-icon {
			font-size: 20px;

			.van-info {
				font-size: 11px;
				background-color: #e22829;
			}
		}
	}

	.comment-item {
		.avatar {
			width: 36px;
			height: 36px;
			margin-right: 13px;
		}

		.name {
			font-size: 16px;
			color: #555;
		}

		.content {
			font-size: 16px;
			color: #222222;
			margin: 10px 0;
		}

		.info {
			display: flex;
			height: 36px;
			align-items: center;
		}

		.pubdate {
			font-size: 12px;
			margin-right: 12px;
		}

		.title-w {
			display: flex;
			justify-content: space-between;
			height: 36px;
			align-items: center;
		}

		.like-w {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.like-icon.liked {
			color: #ef092c
		}
	}

	.article-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		height: 44px;
		border-top: 1px solid #d8d8d8;
		background-color: #fff;

		.comment-btn {
			width: 200px;
			height: 30px;
			border: 1px solid #eeeeee;
			font-size: 15px;
			line-height: 23px;
			color: #a7a7a7;
		}
	}

	.post-comment {
		padding: 14px;
		display: flex;
		align-items: center;
		flex-wrap: wrap
	}
</style>
